<template>
    <div class="storeinformation">
        <div class="ba_f outmain">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>店铺信息</span>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="门店名称" :required="true">
                            <el-input v-model="form.name" style="width: 400px" placeholder="请输入门店名称"></el-input>
                        </el-form-item>
                        <el-form-item label="门店ID" v-show="form.id">
                            <el-input v-model="form.id" style="width: 400px" disabled></el-input>
                            <el-button @click="copyText(form.id)" class="mar_l10">复制</el-button>
                        </el-form-item>
                        <el-form-item label="门店显示">
                          <el-switch v-model="form.display" :active-value="'1'" :inactive-value="'2'" active-text="显示" inactive-text="隐藏"></el-switch>
                          <div class="yb_margin lh16">备注：关闭后用户将不可下单</div>
                        </el-form-item>
                        <el-form-item label="门店状态">
                          <el-switch v-model="form.storeOpen" :active-value="'1'" :inactive-value="'2'" active-text="正常营业" inactive-text="紧急关店"></el-switch>
                          <div class="yb_margin lh16">备注：关闭后用户将不可下单</div>
                        </el-form-item>
<!--                        <el-form-item label="门店编号">-->
<!--                            <el-input v-model="storeNumber" style="width: 400px" disabled></el-input>-->
<!--                            <el-button @click="copyText(storeNumber)" class="mar_l10">复制</el-button>-->
<!--                        </el-form-item>-->
                        <el-form-item label="门店LOGO" :required="true">
                            <div class="uploadSource bor_de rel flex" v-if="form.icon">
                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)" >
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                                </label>
                                <img :src="form.icon" @click='test(1)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                        </el-form-item>
                        <el-form-item label="联系人" :required="true">
                            <el-input v-model="form.storeLinkMan" style="width: 400px"
                                      placeholder="请输入门店联系人"></el-input>
                        </el-form-item>
                        <el-form-item label="门店电话" :required="true">
                            <el-input v-model="form.storeTel" style="width: 400px" placeholder="请输入门店电话"></el-input>
                        </el-form-item>
                        <el-form-item label="所属区域" :required="true">
                            <el-cascader v-model="form.cityArr" :options="data" size='medium' @change='cascaderChange'
                                         filterable></el-cascader>
                        </el-form-item>
                        <el-form-item label="详细地址" :required="true">
                            <el-input placeholder="请输入详细地址" v-model="form.address" style="width: 400px">
                                <el-button slot="append" @click="searchMapClick">搜索</el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="店铺经纬度">
                            <el-input v-model="form.lng" disabled style="width: 130px" class=""></el-input>
                            <el-input v-model="form.lat" disabled style="width: 130px" class="mar_l20"></el-input>
                        </el-form-item>
                        <el-form-item label="地图定位">
                            <select-map ref="mapCom" :mapLng='form.lng' :mapLat='form.lat' :mapAddress='form.address'
                                        @clickmap='getMapdata'></select-map>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="门店信息" name="2">
                    <el-form ref="form2" :model="form2" label-width="180px">
<!--                        <el-form-item label="营业时间" :required="true">-->
<!--                            <el-radio-group v-model="form2.timeType">-->
<!--                                <el-radio label="1" border>全天24小时营业</el-radio>-->
<!--                                <el-radio label="2" border>设置营业时间</el-radio>-->
<!--                            </el-radio-group>-->
<!--                            <div v-if="form2.timeType=='2'" class="mar_t10 zdy_tsinput">-->
<!--                                <div class="time_item mar_b10" v-for="(item,index) in form2.timeArr" :key="index">-->
<!--                                    <el-time-select-->
<!--                                            v-model="item.startTime"-->
<!--                                            :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"-->
<!--                                            placeholder="选择时间"-->
<!--                                            @change="selectTime($event,item,index,1)">-->
<!--                                    </el-time-select>-->
<!--                                    <span class="mar_lr10">-</span>-->
<!--                                    <span class="mar_r10" v-if="item.ciri">次日</span>-->
<!--                                    <el-time-select-->
<!--                                            v-model="item.endTime"-->
<!--                                            :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"-->
<!--                                            placeholder="选择时间"-->
<!--                                            @change="selectTime($event,item,index,2)"-->
<!--                                    >-->
<!--                                    </el-time-select>-->
<!--                                    <el-button type="text" @click="deltimeInterval(index)" class="fon_12 mar_l10">删除-->
<!--                                    </el-button>-->
<!--                                </div>-->
<!--                                <el-button v-show="form2.timeArr.length<3" type="text" @click="addtimeInterval">-->
<!--                                    <Icon type="md-add"/>-->
<!--                                    添加时段-->
<!--                                </el-button>-->
<!--                            </div>-->
<!--                        </el-form-item>-->
                        <el-form-item label="门店简介">
                            <el-input type="textarea" v-model="form2.introduction" placeholder="请输入门店简介"
                                      style="width: 400px"></el-input>
                        </el-form-item>
                        <el-form-item label="主营产品">
                            <el-input v-model="form2.mainDishes" style="width: 400px" placeholder="请输入主营产品"></el-input>
                        </el-form-item>
                        <el-form-item label="人均消费">
                            <el-input v-model="form2.perCapita" style="width: 400px" placeholder="请输入人均消费">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
<!--                        <el-form-item label="店铺服务">-->
<!--                            <el-checkbox-group v-model="form2.service">-->
<!--                                <el-checkbox v-for="service in serviceList" :label="service.id" :key="service.id">-->
<!--                                    {{service.name}}-->
<!--                                </el-checkbox>-->
<!--                            </el-checkbox-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="商家环境">
                            <div class="uploadSource bor_de rel flex" v-for="(item, index) in form2.environment"
                                 :key="index">
<!--                                 <span @click="deleteMultiImage(item,2,'multigraph')" class="curs ab closeicon"-->
<!--                                       title="删除这张图片">-->
<!--                                      <i class="el-icon-circle-close fon_14 color_3"></i>-->
<!--                                </span>-->
                                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)" @mouseleave="leaveMultigraph(index,1)">
                                    <i class="el-icon-check" :ref="`list1${index}`"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                                </label>
                                <img :src="item" @click='test(2)' class="wid img"/>
                            </div>
                            <div class="uploadSource flex-center curs" @click='test(2)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                        </el-form-item>
                      <el-form-item label="商品安全档案">
                        <div class="uploadSource bor_de rel flex" v-for="(item, index) in form2.foodRecords"
                             :key="index">
                          <label class="statusLabel curs" @mouseenter="enterMultigraph(index,2)" @mouseleave="leaveMultigraph(index,2)">
                            <i class="el-icon-check" :ref="`list2${index}`"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(item,3,'multigraph')"></i>
                          </label>
                          <img :src="item" @click='test(3)' class="wid img"/>
                        </div>
                        <div class="uploadSource flex-center curs" @click='test(3)'>
                          <i class="el-icon-plus fon_40 color_d9"></i>
                        </div>
                      </el-form-item>
                      <el-form-item label="营业执照">
                        <div class="uploadSource bor_de rel flex" v-for="(item, index) in form2.license"
                             :key="index">
                          <label class="statusLabel curs" @mouseenter="enterMultigraph(index,3)" @mouseleave="leaveMultigraph(index,3)">
                            <i class="el-icon-check" :ref="`list3${index}`"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(item,4,'multigraph')"></i>
                          </label>
                          <img :src="item" @click='test(4)' class="wid img"/>
                        </div>
                        <div class="uploadSource flex-center curs" @click='test(4)'>
                          <i class="el-icon-plus fon_40 color_d9"></i>
                        </div>
                      </el-form-item>
                    </el-form>
                </el-tab-pane>
<!--                <el-tab-pane label="资质认证" name="3">-->
<!--                    <el-form ref="form3" :model="form3" label-width="180px">-->
<!--                        &lt;!&ndash;                        <el-form-item label="门店标签">&ndash;&gt;-->
<!--                        &lt;!&ndash;                            <el-radio-group v-model="form3.label">&ndash;&gt;-->
<!--                        &lt;!&ndash;                                <el-radio v-for="label in labelList" :label="label.id" :key="label.id">{{label.name}}</el-radio>&ndash;&gt;-->
<!--                        &lt;!&ndash;                            </el-radio-group>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        </el-form-item>&ndash;&gt;-->
<!--                        <el-form-item label="商品安全档案">-->
<!--                            <div class="uploadSource bor_de rel flex" v-for="(item, index) in form3.foodRecords"-->
<!--                                 :key="index">-->
<!--&lt;!&ndash;                                 <span @click="deleteMultiImage(item,3,'multigraph')" class="curs ab closeicon"&ndash;&gt;-->
<!--&lt;!&ndash;                                       title="删除这张图片">&ndash;&gt;-->
<!--&lt;!&ndash;                                      <i class="el-icon-circle-close fon_14 color_3"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                                </span>&ndash;&gt;-->
<!--                                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,2)" @mouseleave="leaveMultigraph(index,2)">-->
<!--                                    <i class="el-icon-check" :ref="`list2${index}`"></i>-->
<!--                                    <i class="el-icon-close" @click="deleteMultiImage(item,3,'multigraph')"></i>-->
<!--                                </label>-->
<!--                                <img :src="item" @click='test(3)' class="wid img"/>-->
<!--                            </div>-->
<!--                            <div class="uploadSource flex-center curs" @click='test(3)'>-->
<!--                                <i class="el-icon-plus fon_40 color_d9"></i>-->
<!--                            </div>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="营业执照">-->
<!--                            <div class="uploadSource bor_de rel flex" v-for="(item, index) in form3.license"-->
<!--                                 :key="index">-->
<!--&lt;!&ndash;                                 <span @click="deleteMultiImage(item,4,'multigraph')" class="curs ab closeicon"&ndash;&gt;-->
<!--&lt;!&ndash;                                       title="删除这张图片">&ndash;&gt;-->
<!--&lt;!&ndash;                                      <i class="el-icon-circle-close fon_14 color_3"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                                </span>&ndash;&gt;-->
<!--                                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,3)" @mouseleave="leaveMultigraph(index,3)">-->
<!--                                    <i class="el-icon-check" :ref="`list3${index}`"></i>-->
<!--                                    <i class="el-icon-close" @click="deleteMultiImage(item,4,'multigraph')"></i>-->
<!--                                </label>-->
<!--                                <img :src="item" @click='test(4)' class="wid img"/>-->
<!--                            </div>-->
<!--                            <div class="uploadSource flex-center curs" @click='test(4)'>-->
<!--                                <i class="el-icon-plus fon_40 color_d9"></i>-->
<!--                            </div>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                </el-tab-pane>-->
                <el-tab-pane label="账号密码" name="5">
                <el-form ref="form5" :model="form5" :rules="rules4" label-width="180px">
                  <el-form-item label="登录账号" prop="userName" required>
                    <el-input v-model="form5.userName" autocomplete="off" placeholder="请输入登录账号"></el-input>
                  </el-form-item>
                  <el-form-item label="登录密码" prop="password" required>
                    <el-input v-model="form5.password" type="password" autocomplete="off" placeholder="请输入登录密码"></el-input>
                  </el-form-item>
                  <!--                        <el-form-item label="确认密码" prop="checkPass">-->
                  <!--                            <el-input v-model="form5.checkPass" type="password" autocomplete="off"-->
                  <!--                                      placeholder="请确认密码"></el-input>-->
                  <!--                        </el-form-item>-->
                  <el-form-item label="绑定手机号" prop="bindTel" required>
                    <el-input v-model="form5.bindTel" autocomplete="off" placeholder="请输入绑定手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="关联微信管理员" v-if="app">
                    <el-select v-model="form5.merchantId" clearable filterable  placeholder="请选择关联微信管理员">
                      <el-option v-for="item in merchantUser" :key="item.id" :label="`${item.userName}（ID:${item.id}）`" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
                <el-tab-pane label="服务费率设置" name="4" v-if="form.loginType != '2'">
                    <el-form ref="form4" :model="form4" label-width="180px" class="mar_t20">
                        <div class="shuju_title mar_b20">
                            <div class="shuju_title_text">
                                <span>服务费率</span>
                            </div>
                        </div>
                        <el-form-item label="平台抽佣模式">
                            <el-radio-group v-model="form4.rule">
<!--                                <el-radio label="1">按系统默认设置</el-radio>-->
                                <el-radio label="2">自定义抽佣设置</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">温馨提示：此抽佣模式建议在单商户下使用</div>
                        </el-form-item>
                        <el-form-item label="佣金计算方式" v-if="form4.rule=='2'">
                            <el-radio-group v-model="form4.type">
                                <el-radio label="1">订单百分比抽成</el-radio>
                                <el-radio label="2">按固定金额</el-radio>
                            </el-radio-group>
                        </el-form-item>
<!--                        <el-form-item label="结算周期">-->
<!--                            <el-input v-model.trim="form4.entryDay" autocomplete="off" placeholder="请输入结算周期"></el-input>-->
<!--                        </el-form-item>-->
                        <div v-if="form4.rule=='2' && form4.type=='1'">
                            <el-form-item label="商品抽佣比例">
                                <el-input v-model="form4.goodsPlatformProportion" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">%</template>
                                </el-input>
                                <!--                                        <el-input v-model="form.name" style="width: 220px">-->
                                <!--                                            <template slot="prepend">区域抽佣</template>-->
                                <!--                                            <template slot="append">%</template>-->
                                <!--                                        </el-input>-->
                                <el-input v-model="form4.goodsStoreProportion" disabled style="width: 220px">
                                    <template slot="prepend">商家获得</template>
                                    <template slot="append">%</template>
                                </el-input>
                                /
                                <el-input v-model="form4.goodsDownMoney" style="width: 220px">
                                    <template slot="prepend">最低抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="配送费抽佣比例">
                                <el-input v-model="form4.deliverPlatformProportion" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">%</template>
                                </el-input>
                                <!--                                    <el-input v-model="form4.name" style="width: 220px">-->
                                <!--                                        <template slot="prepend">区域抽佣</template>-->
                                <!--                                        <template slot="append">%</template>-->
                                <!--                                    </el-input>-->
                                <el-input v-model="form4.deliverStoreProportion" disabled style="width: 220px">
                                    <template slot="prepend">商家获得</template>
                                    <template slot="append">%</template>
                                </el-input>
                                /
                                <el-input v-model="form4.deliverDownMoney" style="width: 220px">
                                    <template slot="prepend">最低抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="包装费抽佣比例">
                                <el-input v-model="form4.boxPlatformProportion" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">%</template>
                                </el-input>
                                <!--                                    <el-input v-model="form4.name" style="width: 220px">-->
                                <!--                                        <template slot="prepend">区域抽佣</template>-->
                                <!--                                        <template slot="append">%</template>-->
                                <!--                                    </el-input>-->
                                <el-input v-model="form4.boxStoreProportion" disabled style="width: 220px">
                                    <template slot="prepend">商家获得</template>
                                    <template slot="append">%</template>
                                </el-input>
                                /
                                <el-input v-model="form4.boxDownMoney" style="width: 220px">
                                    <template slot="prepend">最低抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="当面付抽佣比例">
                                <el-input v-model="form4.cashierPlatformProportion" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">%</template>
                                </el-input>
                                <el-input v-model="form4.cashierStoreProportion" disabled style="width: 220px">
                                    <template slot="prepend">商家获得</template>
                                    <template slot="append">%</template>
                                </el-input>
                                /
                                <el-input v-model="form4.cashierDownMoney" style="width: 220px">
                                    <template slot="prepend">最低抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="快餐抽佣比例">
                                <el-input v-model="form4.fastPlatformProportion" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">%</template>
                                </el-input>
                                <el-input v-model="form4.fastStoreProportion" disabled style="width: 220px">
                                    <template slot="prepend">商家获得</template>
                                    <template slot="append">%</template>
                                </el-input>
                                /
                                <el-input v-model="form4.fastDownMoney" style="width: 220px">
                                    <template slot="prepend">最低抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="店内抽佣比例">
                                <el-input v-model="form4.inStorePlatformProportion" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">%</template>
                                </el-input>
                                <el-input v-model="form4.inStoreStoreProportion" disabled style="width: 220px">
                                    <template slot="prepend">商家获得</template>
                                    <template slot="append">%</template>
                                </el-input>
                                /
                                <el-input v-model="form4.inStoreDownMoney" style="width: 220px">
                                    <template slot="prepend">最低抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div v-if="form4.rule=='2' && form4.type=='2'">
                            <el-form-item label="商品抽成金额">
                                <el-input v-model="form4.goodsFixedMoney" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                                <!--                                    <el-input v-model="form4.name" style="width: 220px">-->
                                <!--                                        <template slot="prepend">区域抽佣</template>-->
                                <!--                                        <template slot="append">元</template>-->
                                <!--                                    </el-input>-->
                            </el-form-item>
                            <el-form-item label="配送费抽成金额">
                                <el-input v-model="form4.deliverFixedMoney" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                                <!--                                    <el-input v-model="form4.name" style="width: 220px">-->
                                <!--                                        <template slot="prepend">区域抽佣</template>-->
                                <!--                                        <template slot="append">元</template>-->
                                <!--                                    </el-input>-->
                            </el-form-item>
                            <el-form-item label="包装费抽成金额">
                                <el-input v-model="form4.boxFixedMoney" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                                <!--                                    <el-input v-model="form4.name" style="width: 220px">-->
                                <!--                                        <template slot="prepend">区域抽佣</template>-->
                                <!--                                        <template slot="append">元</template>-->
                                <!--                                    </el-input>-->
                            </el-form-item>
                            <el-form-item label="当面付抽成金额">
                                <el-input v-model="form4.cashierFixedMoney" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="快餐抽成金额">
                                <el-input v-model="form4.fastFixedMoney" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="店内抽成金额">
                                <el-input v-model="form4.inStoreFixedMoney" style="width: 220px">
                                    <template slot="prepend">平台抽佣</template>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="shuju_title mar_b20">
                            <div class="shuju_title_text">
                                <span>子商户设置</span>
                            </div>
                        </div>
                        <el-form-item label="子商户号">
                            <el-radio-group v-model="form4.sonService">
                                <el-radio label="1">开启</el-radio>
                                <el-radio label="2">关闭</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">开启子商户号后，用户微信付款的订单直接入账到当前商户号里，此模式下平台抽佣设置无效，余额支付的订单不受影响</div>
                        </el-form-item>
                        <el-form-item label="服务商子商户号" v-show="form4.sonService=='1'">
                            <el-input placeholder="请输入服务商子商户号" v-model="form4.subMchId"></el-input>
                            <div class="yb_margin lh16">请填写此门店的服务商子商户号</div>
                        </el-form-item>
                        <el-form-item label="服务商分账" v-show="form4.sonService=='1'">
                            <el-radio-group v-model="form4.profit_sharing">
                                <el-radio label="Y">开启</el-radio>
                                <el-radio label="N">关闭</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">服务商分账需要先开启子商户功能，开启分账后，商家订单完成后会向指定的子商户号进行分账打款(分账比例按照服务费率来计算)</div>
                        </el-form-item>
                        <el-form-item label="分账商户号" v-show="form4.sonService=='1' && form4.profit_sharing=='Y'">
                            <el-input placeholder="请输入分账商户号" v-model="form4.giveMchid"></el-input>
                            <div class="yb_margin lh16">请填写接受平台佣金的微信商户号</div>
                        </el-form-item>
                        <el-form-item label="分账商户号商户全称" v-show="form4.sonService=='1' && form4.profit_sharing=='Y'">
                            <el-input placeholder="请输入分账商户号商户全称" v-model="form4.giveName"></el-input>
                            <div class="yb_margin lh16">请填写接受平台佣金的微信商户号全称，此名称要和微信商户后台保持一致</div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
            <attachment-img ref="img2" type="imgs" @attachment='multigraph1'></attachment-img>
            <attachment-img ref="img3" type="imgs" @attachment='multigraph2'></attachment-img>
            <attachment-img ref="img4" type="imgs" @attachment='multigraph3'></attachment-img>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import selectMap from "@/plugins/selectmap";
    import {
      getCity,
      getStoreBasic,
      postStoreBasic,
      getStoreBusiness,
      postStoreBusiness,
      getStoreAuth, posStoreAuth, getMerchantUser, getStoreAccount, postWithdrawal, posStoreAccount
    } from "@/api/shop";
    import {getStoreConfig, postStoreConfig} from "@/api/setup";

    export default {
        name: "storinformation",
      created() {
            // this.startLoading()
            // this.$baseColorfullLoading(1,'加载中');
            this.initt();
            this.edit();
        },
        components: {attachmentImg, selectMap},
        data() {
          var checkAccount = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('账号不能为空'));
            }
          };
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              // if (this.form5.checkPass !== '') {
              //     this.$refs.form5.validateField('checkPass');
              // }
              callback();
            }
          };
          // var validatePass2 = (rule, value, callback) => {
          //     if (value === '') {
          //         callback(new Error('请再次输入密码'));
          //     } else if (value !== this.form5.password) {
          //         callback(new Error('两次输入密码不一致!'));
          //     } else {
          //         callback();
          //     }
          // };
          var checkTel = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('手机号不能为空'));
            }
          };
            return {
                loading: true,
                activeName: '1',
                form: {
                    name: '',
                    icon: '',
                    cityArr: [],
                    lng: 114.304692,
                    lat: 30.59331,
                    isMain: '1',
                    storeTel: '',
                    storeLinkMan: '',
                    display: '1',
                    storeOpen: '1',
                    address: '湖北省武汉市',
                    id: '',
                },
                storeNumber:'',//门店ID
                data: [],//门店区域
                form2: {
                    timeType: '1',
                    timeArr: [],
                    mainDishes: '',
                    perCapita: '',
                    introduction: '',
                    // service: [],
                    environment: [],
                    id: '',
                    foodRecords: [],
                    license: [],
                },
                // serviceList: [],
                form3: {
                    label: '',
                    foodRecords: [],
                    license: [],
                },
                form4: {
                    rule: '2',
                    type: '2',
                    goodsPlatformProportion:0,
                    goodsStoreProportion: 100,
                    goodsDownMoney: 0,
                    deliverPlatformProportion: 0,
                    deliverStoreProportion: 100,
                    deliverDownMoney: 0,
                    boxPlatformProportion: 0,
                    boxStoreProportion: 100,
                    boxDownMoney: 0,
                    goodsFixedMoney: 0,
                    deliverFixedMoney: 0,
                    boxFixedMoney: 0,
                    entryDay: '',
                    cashierPlatformProportion: 0,
                    cashierStoreProportion: 100,
                    cashierDownMoney: 0,
                    cashierFixedMoney: 0,
                    fastPlatformProportion: 0,
                    fastStoreProportion: 100,
                    fastDownMoney: 0,
                    fastFixedMoney: 0,
                    inStorePlatformProportion: 0,
                    inStoreStoreProportion: 100,
                    inStoreDownMoney: 0,
                    inStoreFixedMoney: 0,

                    sonService:'2',
                    profit_sharing:'N',
                    subMchId:'',
                    giveMchid:'',
                    giveName:'',
                },
                labelList: [],
                ruleValidate1: {
                    name: [
                        {required: true, message: '请输入门店名称', trigger: 'blur'}
                    ],
                    storeTel: [
                        {required: true, message: '请输入门店电话', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请选择地址', trigger: 'blur'}
                    ],
                },
              form5: {
                userName: '',
                password: '',
                // checkPass: '',
                bindTel: '',
                id: '',
                merchantId:'',
              },
              app:'',
              merchantUser:[],
              rules4: {
                password: [{ validator: validatePass, trigger: 'blur' }],
                // checkPass: [
                //     {validator: validatePass2, trigger: 'blur'}
                // ],
                userName: [{ validator: checkAccount, trigger: 'blur' }],
                bindTel: [{ validator: checkTel, trigger: 'blur' }]
              },
            }
        },
        methods: {
            handleClick() {
                this.edit()
            },
            // startLoading: function() {
            //   loading = Loading.service({
            //     lock: true,
            //     text: '加载中……',
            //     spinner: "dots-loader",
            //     background: "hsla(0,0%,100%,.8)",
            //   });
            // },
            // endLoading: function() {
            //   loading.close()
            // },
            async initt() {
                const {data} = await getCity({type: 3});
                this.data = data
            },
            copyText(storeId) {
                let Url2 = storeId;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            async edit() {
                this.bus.$emit('loading', true);
                if (+this.activeName == '1') {
                    const {data} = await getStoreBasic();
                    if (data.id) {
                        // this.ShowPage = true
                        this.form = data
                        this.form.lat = +data.lat
                        this.form.lng = +data.lng
                        this.storeNumber = data.storeNumber
                    }
                    this.bus.$emit('loading', false)
                } else if (+this.activeName == '2') {
                    const {data} = await getStoreBusiness();
                    // this.serviceList = data.serviceList
                    if (data.info.id) {
                        this.form2 = data.info
                        if (data.info.timeType == '2') {
                            this.form2.timeArr = data.info.timeArr.map(v => ({
                                startTime: v.startTime,
                                endTime: v.endTime,
                                ciri: v.ciri,
                            }))
                        }
                    }
                    this.bus.$emit('loading', false)
                } else if (+this.activeName == '3') {
                    const {data} = await getStoreAuth();
                    // this.labelList = data.labelList
                    if (data.info.id) {
                        this.form3 = data.info
                    }
                    this.bus.$emit('loading', false)
                } else if (+this.activeName == '4') {
                    const {data} = await getStoreConfig({ident: 'serviceCharge'});
                    this.formcp = this.form4
                    this.form4 = Object.assign(this.formcp, data);
                    this.form4.goodsStoreProportion=100-this.form4.goodsPlatformProportion;
                    this.form4.deliverStoreProportion=100-this.form4.deliverPlatformProportion;
                    this.form4.boxStoreProportion=100-this.form4.boxPlatformProportion;
                    this.form4.cashierStoreProportion=100-this.form4.cashierPlatformProportion;
                    this.form4.fastStoreProportion=100-this.form4.fastPlatformProportion;
                    this.form4.inStoreStoreProportion=100-this.form4.inStorePlatformProportion;
                    this.form4.rule = '2'
                    this.bus.$emit('loading', false)
                }else if (+this.activeName == '5') {
                  const {data} = await getStoreBasic();
                  if (data.id) {
                    this.id = data.id
                    const res = await getStoreAccount({ id: data.id });
                    this.app = res.data.app?res.data.app:'';
                    this.merchantUser = res.data.merchantUser?res.data.merchantUser:[]
                    if (res.data.id) {
                      this.form5.userName = res.data.userName;
                      this.form5.password = res.data.passWord;
                      this.form5.bindTel = res.data.phone;
                      this.form5.userId = res.data.id;
                      this.form5.merchantId = res.data.merchantId;
                    }
                  }else {
                    const res2 = await getMerchantUser();
                    this.app = res2.data.app?res2.data.app:'';
                    this.merchantUser = res2.data.merchantUser?res2.data.merchantUser:[]
                  }
                  this.bus.$emit('loading', false)
                }

            },
            // async initt() {
            //     this.$api.get('channel/shop/get-city', {
            //         "type": 3,
            //     }, res => {
            //         if (res.code == 1) {
            //             this.data = res.data
            //         } else {
            //             console.log(res.msg);
            //         }
            //     });
            // },
            // edit() {
            //     switch (+this.activeName) {
            //         case 1:
            //             this.$api.get('channel/shop/store-basic', {}, res => {
            //                 if (res.code == 1 && res.data.id) {
            //                     this.form = res.data
            //                     this.form.lat = +res.data.lat
            //                     this.form.lng = +res.data.lng
            //                     console.log(res.data, this.form);
            //                     // loading.close();
            //                     // this.loading= false
            //                     this.ShowPage = true
            //                     // setTimeout(()=>{
            //                     //     this.loading= false
            //                     // },2000)
            //
            //                     // this.$nextTick(()=>{
            //                     //     this.showdata= false
            //                     // })
            //                 } else {
            //                     console.log(res.msg);
            //                 }
            //             });
            //             break;
            //         case 2:
            //             this.$api.get('channel/shop/store-business', {}, res => {
            //                 if (res.code == 1) {
            //                     this.serviceList = res.data.serviceList
            //                     if(res.data.info.id){
            //                         this.form2 = res.data.info
            //                         if(res.data.info.timeType =='2'){
            //                             for(let i = 0;i < res.data.info.environment;i++){
            //                                 let specObj = {startTime: res.data.info.environment[i].startTime,
            //                                     endTime: res.data.info.environment[i].endTime,
            //                                     ciri: res.data.info.environment[i].ciri,}
            //                                 this.$set(this.form2.timeArr, this.form2.timeArr.length, specObj)
            //                             }
            //                         }
            //                     }
            //                 } else {
            //                     console.log(res.msg);
            //                 }
            //             });
            //             break;
            //         case 3:
            //             this.$api.get('channel/shop/store-auth', {}, res => {
            //                 if (res.code == 1) {
            //                     this.labelList = res.data.labelList
            //                     if(res.data.info.id){
            //                         this.form3 = res.data.info
            //                     }
            //                 } else {
            //                     console.log(res.msg);
            //                 }
            //             });
            //             break;
            //     }
            //
            // },
            clickTab(name) {
                this.activeName = name
            },
            addtimeInterval() {
                let specObj = {startTime: '00:00', endTime: '00:00', ciri: true,}
                this.$set(this.form2.timeArr, this.form2.timeArr.length, specObj)
            },
            deltimeInterval(index) {
                this.$delete(this.form2.timeArr, index)
            },
            selectTime(value, item, index, type) {
                //value是点击返回的时间，item是开始和结束时间，idnex是所有，type是区别是点击开始时间还是结束时间
                //type=1是判断开始时间，2是判断结束时间、、加type为了判断两种情况先选开始时间和先选结束时间
                //如果结束时间小于开始时间就为次日
                // console.log('111',value,item,index,type)
                // console.log('122',value,item.endTime,item.startTime)
                for (let i = 0; i < this.form2.timeArr.length; i++) {
                    // console.log('index',i,index)
                    if (i == index) {
                        // console.log('当前选择数据')
                        if (type == 1) {
                            if (value >= item.endTime) {
                                // console.log('111111')
                                item.ciri = true
                            } else {
                                item.ciri = false
                            }
                        }
                        if (type == 2) {
                            // console.log('222222')
                            if (value <= item.startTime) {
                                item.ciri = true
                            } else {
                                item.ciri = false
                            }
                        }
                    }
                }
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            enterMultigraph(index,i=0){
                //多图删除，i是指文档中的第几个ref多图对象，index图片列表
                // console.log(this.$refs[`list${index}`][index],index)
                this.$refs[`list${i}${index}`][0].style.display = 'none';
            },
            leaveMultigraph(index,i=0){
                this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            multigraph1(url) {
                if (this.form2.environment && this.form2.environment.length > 0) {
                    this.form2.environment = this.form2.environment.concat(url.arr)
                } else {
                    this.form2.environment = url.arr
                }
            },
            multigraph2(url) {
                if (this.form2.foodRecords && this.form2.foodRecords.length > 0) {
                    this.form2.foodRecords = this.form2.foodRecords.concat(url.arr)
                } else {
                    this.form2.foodRecords = url.arr
                }
            },
            multigraph3(url) {
                if (this.form2.license && this.form2.license.length > 0) {
                    this.form2.license = this.form2.license.concat(url.arr)
                } else {
                    this.form2.license = url.arr
                }
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                        case 3:
                            this.form2.foodRecords.remove(item);
                            break
                        case 4:
                            this.form2.license.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            getMapdata(mapAddress, mapLat, mapLng) {
                this.form.address = mapAddress
                this.form.lat = mapLat
                this.form.lng = mapLng
            },
            searchMapClick() {
                console.log(this.$refs.mapCom)
                this.$refs.mapCom.searchKeyword();
            },
            async onSubmit() {
                console.log('submit!');
                // console.log(this.form)
                if (this.activeName == '1') {
                    this.form.isMain = 1
                    const {msg} = await postStoreBasic(this.form);
                    this.$baseMessage(msg, "success");
                } else if (this.activeName == '2') {
                    const {msg} = await postStoreBusiness(this.form2);
                    this.$baseMessage(msg, "success");
                } else if (this.activeName == '3') {
                    const {msg} = await posStoreAuth(this.form3);
                    this.$baseMessage(msg, "success");
                } else if (this.activeName == '4') {
                    this.form4.ident = 'serviceCharge'
                    this.form4.identName = '商家费率设置'
                    this.form4.rule = '2'
                    const { msg } = await postStoreConfig(this.form4);
                    this.$baseMessage(msg, "success");
                }else if (this.activeName == '5') {
                  if (this.id) {
                    this.form5.id = this.id;
                  }
                  const { msg } = await posStoreAccount(this.form5);
                  this.$baseMessage(msg, 'success');
                }
                // switch (+this.activeName) {
                //     case 1:
                //         this.form.isMain = 1
                //         this.$api.post('channel/shop/store-basic', this.form, res => {
                //             if (res.code == 1) {
                //                 this.$message.success(res.msg);
                //                 this.edit();
                //             } else {
                //                 this.$message.success(res.msg);
                //             }
                //         });
                //         break;
                //     case 2:
                //         // console.log(this.form2)
                //         this.$api.post('channel/shop/store-business', this.form2, res => {
                //             if (res.code == 1) {
                //                 this.$message.success(res.msg);
                //                 this.edit();
                //             } else {
                //                 this.$message.success(res.msg);
                //             }
                //         });
                //         break;
                //     case 3:
                //         this.$api.post('channel/shop/store-auth', this.form3, res => {
                //             if (res.code == 1) {
                //                 this.$message.success(res.msg);
                //                 this.edit();
                //             } else {
                //                 this.$message.success(res.msg);
                //             }
                //         });
                //         break;
                // }
            },
            cascaderChange(e) {
                this.form.cityArr = e
            },
        }
    }
</script>
<style scoped lang="scss">
    .storeinformation .el-form {
        margin-top: 20px;
    }
</style>
